<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="title" v-if="!togglePage" slot="header">
          <span style="font-weight: 700">创建考试</span>
          <el-button
            @click="togglePage = !togglePage"
            class="createExam"
            type="primary"
            size="small"
            style="float: right; margin-top: -5px"
            >返回列表</el-button
          >
        </div>
        <el-row class="title" v-else type="flex" justify="end">
          <el-button
            style="margin-bottom: 15px"
            class
            type="primary"
            size="small"
            @click="toggle"
            >创建考试</el-button
          >
        </el-row>
        <exam-list v-if="togglePage" ref="examList" />
        <add-exam @updateToggle="updateList" v-else ref="addExam" />
      </el-card>
    </div>
  </div>
</template>

<script>
import AddExam from './components/addExam.vue'
import ExamList from './components/exam-list.vue'
export default {
  name: 'Exam',
  components: { AddExam, ExamList },

  data() {
    return {
      togglePage: true, //切换
    }
  },
  methods: {
    // 切换创建考试
    toggle() {
      this.togglePage = false
    },
    updateList(val) {
      this.togglePage = val
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep.dashboard-container {
  .app-container {
    .title {
      .el-button {
        color: #409eff;
        background: #ecf5ff;
        border-color: #b3d8ff;
      }
      .el-button:hover {
        background: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
  }
}
</style>
